import wangEditor from "wangeditor";
// import wangEditor from "../components/wangeditor";
import { uploadUrl } from "@/util/upload";

export const editMixin = {
  data () {
    return {
      isSmallUrl: false,
      biaoqianList: []
    }
  },
  methods: {
    getBiaoqianList() {
      const params = { type: "BQ", status: 1 };
      this.$axios.get("/api/tags.json", { params }).then((response) => {
        this.biaoqianList = response.list;
      });
    },
    handleAvatarSuccess(name, res, file) {
      const fileName = name
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);;
        this.form[fileName] = fileObj.url;
        this.form = JSON.parse(JSON.stringify(this.form))
      }
    },
    createEditor (form = {}) {
      const _this = this;
      const editor = new wangEditor(`#demo1`);
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        const objForm = JSON.parse(JSON.stringify(this.form));
        objForm.content = newHtml;
        this.form = objForm;
      };
      editor.config.height = 1000
      editor.config.uploadImgShowBase64 = false;
      editor.config.uploadImgServer = uploadUrl();
      editor.config.uploadFileName = 'file';
      editor.config.uploadImgMaxLength = 1;
      editor.config.uploadImgMaxSize = 12 * 1024 * 1024 // 12M
      editor.config.uploadImgTimeout = 20 * 1000
      editor.config.uploadImgHooks = {
          // 上传图片之前
          before: function(xhr) {
              console.log(xhr)
              // _this.$message.info("图片过大时，上传时间可能较长，请耐心等等~");
          },
          // 图片上传并返回了结果，图片插入已成功
          success: function(xhr) {
              console.log('success', xhr)
          },
          // 图片上传并返回了结果，但图片插入时出错了
          fail: function(xhr, editor, resData) {
              _this.$message.error('图片上传失败，请重试~')
          },
          // 上传图片出错，一般为 http 请求的错误
          error: function(xhr, editor, resData) {
              _this.$message.error('图片上传失败，请重试~')
          },
          // 上传图片超时
          timeout: function(xhr) {
              _this.$message.error('图片上传超时，请注意文件大小~')
          },
          // 图片上传并返回了结果，想要自己把图片插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
          customInsert: function(insertImgFn, result) {
              // result 即服务端返回的接口
              console.log('customInsert', result)

              // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
              insertImgFn(result.file.url)
          }
      }
      // 创建编辑器
      editor.create();
      editor.txt.html(form.content);
      this.editor = editor;
    }
  },
  watch: {
    "form.formDisplay"(newVal) {
      this.isSmallUrl = newVal.includes('2')
    },
  },
};
